<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加单车</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .layui-layout {
            width: 80%;
            height: 95%;
        }

        .layui-form.two {
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .title-container {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 120px;
            text-align: center;
            padding-right: 10px;
            font-weight: bold;
        }

        .layui-input-block {
            margin-left: 28px;
            margin-bottom: 15px;
        }

        .layui-input {
            width: 300px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
            outline: none;
        }

        .layui-btn {
            background-color: #5FB878;
            color: #fff;
        }

        .layui-btn-primary {
            background-color: #999;
            color: #fff;
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-form two">
        <div class="title-container">
            <label class="layui-form-label">增加单车信息：</label>
        </div>
        <div class="layui-input-block">
            <input type="text" id="bicycleNumber" name="bicycleNumber" required lay-verify="required"
                   placeholder="请输入单车编号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-block">
            <input type="text" id="location" name="location" required lay-verify="required"
                   placeholder="请输入单车位置" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-block">
            <input type="text" id="status" name="status" required lay-verify="required"
                   placeholder="请输入单车状态" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-block">
            <input type="text" id="store" name="store" required lay-verify="required"
                   placeholder="请输入单车类型" autocomplete="off" class="layui-input">
        </div>
        <!-- 操作 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn button" lay-submit lay-filter="formDemo">提交</button>
                <button type="button" class="layui-btn layui-btn-primary button exit" id="exit"
                        value="取消">取消</button>
            </div>
        </div>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/public.js"></script>
<script>
    layui.use(['form', 'element', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;
        // 点击取消，关闭页面
        $(document).on("click", ".exit", function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
        //提交按钮
        form.on('submit(formDemo)', function (data) {
            var parm = data.field;
            var getUrl=url+list.add;
            $.ajax({
                type: "POST",
                url: getUrl,
                contentType: 'application/json',
                data: JSON.stringify(parm),
                success: function (data) {
                    console.log("BicycleRes:" + JSON.stringify(data));
                    if (data.status === 0) {
                        console.log("增加成功");
                        var storage = window.localStorage;
                        storage.setItem("bicycleNumber",$("#bicycleNumber").val());
                        storage.setItem("location", $("#location").val());
                        storage.setItem("status", $("#status").val());
                        storage.setItem("store", $("#store").val());
                        // 关闭当前页面
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    } else {
                        console.error("增加失败：" + data.message);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX请求失败：", status, error);
                }
            });
            return false; // 阻止表单提交
        });
    });
</script>
</body>

</html>
